<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title>{{ post.title }}</v-card-title>
          <v-card-subtitle>{{ post.owner }}</v-card-subtitle>
          <v-divider></v-divider>
          <div v-html="post.content" style="padding: 15px;"></div>
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <!--点赞按钮，仅在用户登录时可见-->
            <v-btn icon v-show="$store.state.user">
              <v-icon v-if="show" color="red" @click="thumbUp">mdi-heart</v-icon>
              <v-icon v-else @click="thumbUp">mdi-heart</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    <!--评论框，用户没有登录时是看不见的-->
    <v-row v-if="$store.state.user">
      <v-col cols="12">
        <v-form ref="commentForm" v-model="valid">
          <v-textarea name="comment" v-model="comment" :rules="commentRules" outlined label="评论" auto-grow></v-textarea>
          <!--提交按钮-->
          <v-btn color="primary" :disabled="!valid" @click="validate">提交</v-btn>
        </v-form>
      </v-col>
    </v-row>
    <!--评论登录提示-->
    <v-row v-else>
      <v-col cols="12">
        <v-alert type="warning">登录之后才可以评论</v-alert>
      </v-col>
    </v-row>
    <v-divider></v-divider>
    <!--评论区-->
    <v-row v-if="comments.length !== 0">
      <v-col cols="12" v-for="(item, index) in comments" :key="index">
        <v-card>
          <v-list>
            <v-list-item>
              <v-list-item-avatar>
                <v-img v-if="item.owner_image" :src="item.owner_image"></v-img>
                <v-img v-else src="../assets/avatar.jpg"></v-img>
              </v-list-item-avatar>
              <v-list-item-content>{{ item.owner }}</v-list-item-content>
            </v-list-item>
          </v-list>
          <v-divider></v-divider>
          <div style="padding: 15px;">{{ item.content }}</div>
        </v-card>
      </v-col>
    </v-row>
    <!--没有评论的时候提示暂无评论-->
    <v-row v-else>
      <v-col cols="12">
        <v-alert type="info">暂时还没有评论哦，快来发一条评论吧！</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'PostDetail',
  data: () => ({
    valid: true,
    show: false,
    post: {
      id: null,
      title: '',
      owner: '',
      content: ''
    },
    comment: '',
    commentRules: [
      v => !!v || '评论内容不能为空'
    ],
    comments: []
  }),
  methods: {
    validate () {
      const valid = this.$refs.commentForm.validate()
      if (valid) {
        this.$axios.post('api/comment/', {
          content: this.comment,
          post: this.post.id,
          owner: this.$store.state.user.username
        }).then(response => {
          console.log(response)
          // 提交之后“刷新”页面
          this.$axios.get('api/post/' + this.$route.params.id + '/')
            .then(response => {
              console.log(response)
              // 设置文章信息
              this.post = response.data
              // 设置评论
              this.comments = response.data.comments.results
            }).catch(error => {
              console.log(error)
            })
        }).catch(error => {
          console.log(error)
        })
      }
    },
    thumbUp () {
      // 点赞功能的实现有些特殊，实际上只要两个值，点赞目标和点赞的人
      this.$axios.post('api/thumb_up/', {
        post: this.$route.params.id,
        user: this.$store.state.user.username
      }).then(response => {
        console.log(response)
        // 在尽可能小的范围内改变点赞按钮颜色，不重新获取数据
        this.show = !this.show
      }).catch(error => {
        console.log(error)
      })
    }
  },
  created () {
    this.$axios.get('api/post/' + this.$route.params.id + '/')
      .then(response => {
        console.log(response)
        // 设置文章信息
        this.post = response.data
        // 设置评论
        this.comments = response.data.comments.results
        // 设置点赞红心是红色还是黑色的
        this.show = response.data.thumbers.includes(this.$store.state.user.username)
      }).catch(error => {
        console.log(error)
      })
  }
}
</script>

<style scoped>

</style>
